<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="/static/kx/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/kx/js/echarts-gl.min.js"></script>
<script type="text/javascript" src="/static/kx/js/ecStat.min.js"></script>
<script type="text/javascript"
        src="/static/kx/js/dataTool.min.js"></script>
<script type="text/javascript" src="/static/kx/js/china.js"></script>
<script type="text/javascript" src="/static/kx/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="/static/kx/js/bmap.min.js"></script>
<script type="text/javascript" src="/static/kx/simplex.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var upColor = '#00da3c';
    var downColor = '#ec0000';

    //切割数组，把数组中的日期和数据分离，返回数组中的日期和数据
    function splitData(rawData) {

        var categoryData = [];
        var values = [];
        var volumes = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);

            values.push(rawData[i]);
            volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);//下面的成交量的柱子。1 红色 -1 绿色
        }
        return {
            categoryData: categoryData,
            values: values,
            volumes: volumes
        };
    }
    //计算MA平均线，N日移动平均线=N日收盘价之和/N dayCount要计算的天数(5,10,20,30)
    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data.values[i - j][1];
            }
            result.push(+(sum / dayCount).toFixed(3));
        }
        return result;
    }
    $.ajax({
        type: "GET",      //data 传送数据类型。post 传递
        dataType: 'jsonp',  // 返回数据的数据类型json
        url: "/index.php/index/test/kx",  // yii 控制器/方法

        data: {da:1},  //传送的数据
        success: function (data) {
            console.log(data.responseText);
        },error: function (data){

            console.log(data.responseText);
        }

    });
    // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest) ,成交量
    //开盘(open) > 收盘(close) 红色柱子

        var data = splitData(
            [
                ["2004-01-02",10452.74,10409.85,10367.41,10554.96,10554.96,168890000],
                ["2004-01-05",10411.85,10544.07,10411.85,10575.92,10554.96,221290000],
                ["2004-01-06",10543.85,10538.66,10454.37,10584.07,10554.96,191460000],
                ["2004-01-07",10535.46,10529.03,10432,10587.55,10554.96,225490000],
                ["2004-01-08",10530.07,10592.44,10480.59,10651.99,10554.96,237770000],
                ["2004-01-09",10589.25,10458.89,10420.52,10603.48,10554.96,223250000],
                ["2004-01-12",10461.55,10485.18,10389.85,10543.03,10554.96,197960000],[
                "2004-01-13",10485.18,10427.18,10341.19,10539.25,10554.96,197310000],
                ["2004-01-14",10428.67,10538.37,10426.89,10573.85,10554.96,186280000],
            ]);

    myChart.setOption(option = {
        backgroundColor: '#fff',
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        //提示框
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            // formatter: function (param) {

            //         param = param[0];
            //    console.log(param.data)
            //         return [
            //             '时间: ' + param.name + '<hr size=1 style="margin: 3px 0">',
            //             '开盘价: ' + param.data[1] + '<br/>',
            //             '收盘: ' + param.data[2] + '<br/>',
            //             '最低: ' + param.data[3] + '<br/>',
            //             '最高: ' + param.data[4] + '<br/>',
            //             '成交量: ' + param.data[5] + '<br/>',
            //                '30: ' + calculateMA(30, param.data) + '<br/>'
            //         ].join('');
            //     },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#000'
            },
            position: function (pos, params, el, elRect, size) {

                var obj = {top: 10};
                console.log(obj)
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            }
            // extraCssText: 'width: 170px'
        },
        //坐标轴指示器配置项
        axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                brush: {
                    type: ['lineX', 'clear']
                }
            }
        },
        brush: {
            xAxisIndex: 'all',
            brushLink: 'all',
            outOfBrush: {
                colorAlpha: 0.1
            }
        },
        visualMap: {
            show: false,
            seriesIndex: 5,
            dimension: 2,
            pieces: [{
                value: 1,
                color: downColor
            }, {
                value: -1,
                color: upColor
            }]
        },
        //直角坐标系
        grid: [
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            }
        ],
        xAxis: [
            {
                type: 'category',//坐标轴类型，类目轴
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    z: 100
                }
            },
            {
                type: 'category',
                gridIndex: 1,
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            var seriesValue = (params.seriesData[0] || {}).value;
                            return params.value
                                + (seriesValue != null
                                        ? '\n' + echarts.format.addCommas(seriesValue)
                                        : ''
                                );
                        }
                    }
                }
            }
        ],

        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        //用于区域缩放
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 98,//数据窗口范围的起始百分比
                end: 100//数据窗口范围的结束百分比
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',//滑动条型数据区域缩放组件
                top: '85%',
                start: 98,//数据窗口范围的起始百分比
                end: 100//数据窗口范围的结束百分比
            }
        ],
        //图表类型
        series: [
            {
                name: 'Dow-Jones index',
                type: 'candlestick', //K线图
                data: data.values,//y轴对应的数据
                itemStyle: {
                    normal: {
                        color: upColor,
                        color0: downColor,
                        borderColor: null,
                        borderColor0: null
                    }
                },
                tooltip: {
                    formatter: function (param) {
                        console.log(param)
                        param = param[0];

                        return [
                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                            'Open1: ' + param.data[0] + '<br/>',
                            'Close: ' + param.data[1] + '<br/>',
                            'Lowest: ' + param.data[2] + '<br/>',
                            'Highest: ' + param.data[3] + '<br/>',
                            'Highests: ' + param.data[4] + '<br/>'
                        ].join('');
                    }
                }
            },
            {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA10',
                type: 'line',
                data: calculateMA(10, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA20',
                type: 'line',
                data: calculateMA(20, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: calculateMA(30, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: '成交量',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data.volumes
            },
        ]
    }, true);

    // myChart.on('brushSelected', renderBrushed);

    // function renderBrushed(params) {
    //     var sum = 0;
    //     var min = Infinity;
    //     var max = -Infinity;
    //     var countBySeries = [];
    //     var brushComponent = params.brushComponents[0];

    //     var rawIndices = brushComponent.series[0].rawIndices;
    //     for (var i = 0; i < rawIndices.length; i++) {
    //         var val = data.values[rawIndices[i]][1];
    //         sum += val;
    //         min = Math.min(val, min);
    //         max = Math.max(val, max);
    //     }

    //     panel.innerHTML = [
    //         '<h3>STATISTICS:</h3>',
    //         'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
    //         'MIN of open: ' + min.toFixed(4) + '<br>',
    //         'MAX of open: ' + max.toFixed(4) + '<br>'
    //     ].join(' ');
    // }

    myChart.dispatchAction({
        type: 'brush',
        areas: [
            {
                brushType: 'lineX',
                coordRange: ['2016-06-02', '2016-06-20'],
                xAxisIndex: 0
            }
        ]
    });

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>